<template>
  <div style="margin-top: 65px">
    <sunDrawerBack show="show_comments" :parent="this.$parent.$parent" />
    <!-- ${currentItem.description} -->
    <el-page-header class="sun-el-page-header" :content="`${currentItem.title}-评论`" @back="goBack" />
    <SunSearch :search="searchList" />

    <el-card class="sun-el-card">
      <sunUpdataAdd :showAdddata="false" title="评论" />
      <el-table v-loading="listLoading" :data="tableData" border style="width: 100%">

        <el-table-column label="用户昵称" width="230" prop="nickname" />
        <el-table-column label="内容" width="300" prop="content" />
        <el-table-column label="地区" prop="district" />
        <el-table-column label="评论点赞数" prop="zan_count" />
        <el-table-column label="回复数量" align="center" width="100px" prop="reply_count" />
        <el-table-column label="情感分数" align="center" prop="score" />
        <el-table-column label="评论日期" align="center" width="160px" prop="comment_at" />
        <el-table-column label="创建时间" align="center" width="160px" prop="created_at" />
        <el-table-column label="更新时间" align="center" width="160px" prop="updated_at" />
        <el-table-column label="操作" fixed="right" width="80" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>

        </el-table-column>
      </el-table>
      <pagination v-show="laypage.total > 0" :total="laypage.total" :page.sync="laypage.number" :limit.sync="laypage.size" @pagination="requestData" />
    </el-card>
    <el-dialog
      width="600px"
      class="sun-el-dialog"
      :destroy-on-close="true"
      :lock-scroll="true"
      :close-on-click-modal="false"
      :append-to-body="true"
      :show-close="false"
      :modal-append-to-body="false"
      :visible.sync="show_comment_edit"
    >
      <el-form ref="refForm" :model="formData">
        <el-form-item
          label="情感分数"
          prop="score"
          :rules="[{ required: true, message: '请输入情感分数', trigger: 'blur' }]"
        >
          <el-input v-model="formData.score" placeholder="请输入情感分数" />
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="show_comment_edit = false">取 消</el-button>
        <el-button type="primary" size="small" @click="onFinish(formData.id)">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { put, get } from '@/api/request'
import { $tooltips } from '@/sun-components/SunMsg.js'
import SunDrawerBack from '@/sun-components/SunDrawerBack'
import SunSearch from '@/sun-components/SunSearch'
import SunUpdataAdd from '@/sun-components/SunUpdataAdd'
import Pagination from '@/sun-components/Pagination'
export default {
  name: 'Comments',
  components: { SunDrawerBack, SunUpdataAdd, SunSearch, Pagination },
  props: {
    feeling: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      searchList: [
        { 'nickname': '用户昵称', type: 'input', show: 'nickname', value: '' },
        {
          'sex': '用户性别', type: 'select', show: 'sex', value: '', options: [
            {
              'label': '男',
              'value': 1
            },
            {
              'label': '女',
              'value': 2
            }
          ]
        },
        { 'district': '地区', type: 'input', show: 'district', value: '' },
        { 'content': '评论内容', type: 'input', show: 'content', value: '' }
      ],
      tableData: [],
      listLoading: false,
      searchFilter: {},
      formRules: {},
      laypage: {
        number: 1,
        size: 30,
        total: 0
      },
      show_comment_edit: false,
      formData: {}
    }
  },
  computed: {
    currentItem() {
      return this.$parent.$parent.currentItem
    },
    show_comments() {
      return this.$parent.$parent.show_comments
    }
  },
  watch: {
    show_comments: {
      handler: function(show) {
        if (show) {
          this.requestData()
        }
      }
    }
  },
  created() {
    const _that = this
    if (_that.show_comments) {
      console.log('打开了', this.currentItem)
    }
    this.requestData()
  },
  methods: {
    async onFinish(id) {
      await put(`comments/${id}`, { 'score': this.formData.score }).then(response => {
        if (response.code === 0) {
          $tooltips('编辑成功!', 'success')
          this.upData()
        }
      })
      this.show_comment_edit = false
    },
    handleEdit(index, row) {
      this.formData = row
      this.show_comment_edit = true
    },
    addData() {
      //
    },
    async searchResult(filter) {
      this.searchFilter = filter
      this.requestData()
    },
    upData() {
      this.requestData()
    },
    async goBack() {
      this.$parent.$parent.show_comments = false
    },
    async requestData() {
      this.listLoading = true
      console.log(this.feeling)
      let api = `comments?video_id=${this.$parent.$parent.currentItem.id}`
      if (this.feeling) {
        api = api + '&feeling=' + this.feeling
      }
      await get(api, Object.assign(this.searchFilter, { 'page[size]': this.laypage.size, 'page[number]': this.laypage.number })).then(response => {
        if (response.code === 0) {
          // console.log(response.data)
          this.tableData = response.data
          this.laypage.total = response.meta.total
        }
        this.listLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/sun-style.scss';

.sun-form-pages ::v-deep {
  .el-switch__label {
    width: 35px !important;
    text-align: center !important;
  }
}
</style>
